<template>
  <view class="write-evaluation" v-cloak>
    <view class="evaluation-header">
      <view class="h2">大众口腔(汉街店)</view>
      <view class="box-flex" :class="idx==0?'header-one':''" v-for="(item,idx) in scoreList" :key="item.scoreTypeId">
        {{item.name}} <uni-rate v-model="item.score" style="margin: 0 20rpx;" value="1" :size="idx==0?'20':'16'"></uni-rate>
        <view class="span">{{item.score || 0}}分</view>
      </view>
    </view>
    <view class="evaluation-main">
      <textarea class="textarea" v-model="content" placeholder="大家都在问，写更有帮助性的评价吧~" cols="30" rows="10"></textarea>
      <view class="main-imgs">
        <view class="imgs-item" v-for="(item,idx) in list" :key="item" @click="handlePreImg(idx)">
          <image :src="item" mode="aspectFill" class="img"></image>
          <image src="@/static/checked_false.svg" mode="aspectFill" class="icon" @click.stop="handleDeleteImg(idx)"></image>
        </view>
        <view class="imgs-upload" @click="handleChoiseImg()" v-if="list.length < 9">
          <uni-icons type="camera" size="36"></uni-icons>
          <view>添加照片/视频</view>
        </view>
      </view>
    </view>
    <view class="evaluation-doctor">
      <view class="main-title">选择医师</view>
      <view class="main-doctor">
        <view class="doctor-item" :class="doctorStaffId == item.id?'active':''" v-for="(item) in doctorList" :key="idx" @click="doctorStaffId = item.id">
          <image :src="item.avatar || '../static/doctor-default.png'" mode="aspectFill" class="img"></image>
          <image src="@/static/check-on.png" v-show="item.id == doctorStaffId" mode="aspectFill" class="icon"></image>
          <view class="h2">{{item.realName}}</view>
        </view>
      </view>
    </view>
    <view class="evaluation-project">
      <view class="main-title">服务项目</view>
      <view class="project-p">{{info.title}}</view>
    </view>
    <view class="evaluation-footer">
      <view class="var-button" @click="handleSubmit()">提交</view>
      <view class="footer-p">-您的评价内容会被匿名展示-</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        orderId:'',
        doctorStaffId:'',
        ossData:{},
        list:[],
        scoreList:[],
        content:'',
        doctorList:[],
        info:{}
      };
    },
    onLoad(ops) {
      this.orderId = ops.orderId
      this.$get('/common/external/aliyun/getToken').then(res=>{
        this.ossData = res.content
      })
      this.$get(`/product/myOrder/orderProductDetail/${ops.orderId}`).then(res=>{
        this.info = res.content
      })
      this.$get('/social/comment/scoreType',{
        appId:'yh_mouth_org'
      }).then(res=>{
        if(res.code =='1'){
          this.scoreList = res.content
        }
      })
      this.$get('/merchant/v1/staff',{orgId:uni.getStorageSync('selectStore').id}).then(res=>{
        this.doctorList = res.content || []
      })
    },
    methods:{
      handleDeleteImg(e){  //  删除图片
        this.list.splice(e,1)
      },
      handleChoiseImg(){ ///  选择图片
        if(this.list.length == 9){
          this.$toast('最多可选择9张图片')
          return;
        }
        uni.chooseImage({
        	count: 9, //默认9
        	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        	sourceType: ['album'], //从相册选择
        	success: (res) => {
            this.list = res.tempFilePaths
        	}
        });
      },
      handlePreImg(e){
        uni.previewImage({
          urls:this.list,
          current:e
        })
      },
      uploadFilePromise(filePath) {  ///  多张图片上传
        let channel = 'activity-weixin-h5'
        /*#ifdef MP-WEIXIN*/
        channel = 'activity-weixin-mini'
        /*#endif*/
        // #ifdef MP-TOUTIAO
        channel = 'event-douyin-mini'
        // #endif
        return new Promise((resolve, reject) => {
          const relaUrl = this.ossData.dir+parseInt(Date.parse(new Date()) + Math.random() * 100000) + '.jpg'
          uni.uploadFile({
            url: this.ossData.host, //仅为示例，非真实的接口地址
            filePath: filePath,
            name: 'file',
            formData: {
              key: relaUrl,
              OSSAccessKeyId: this.ossData.accessid,
              policy: this.ossData.policy,
              Signature: this.ossData.signature,
            },
            header: {
              sassAppId:this.$sassAppId,
              token: uni.getStorageSync('token'),
              channel,
            },
            success: (uploadFileRes) => {
              resolve(this.ossData.host + '/' + relaUrl);
            },
            fail: (res) => {
              reject(err);
            }
          })
        });
      },
      handleSubmit(){
        if(!this.doctorStaffId) return this.$toast('请先选择医生')
        uni.showModal({
          title:'是否提交评价？',
          success:async (ret) => {
            if(ret.confirm){
              try {
                const uploadPromises = this.list.map((path) => this.uploadFilePromise(path));
                const results = await Promise.all(uploadPromises);
                const data = {
                  "commentReqList": [{
                    "appId": "yh_mouth_org",
                    "topicId": uni.getStorageSync('selectStore').id
                  },{
                    "appId": "yh_org_doctor",
                    "topicId": this.doctorStaffId
                  },{
                    "appId": "yh_service_product",
                    "topicId": this.info.productId
                  }],
                  "content": this.content,
                  "imgUrls": results,
                  "orderId": this.orderId,
                  "scoreList": this.scoreList
                }
                uni.showLoading({
                  title:'加载中...'
                })
                this.$post('/social/yahe/comment',data,'1').then(res=>{
                  if(res.code == '1'){
                    this.$toast('提交成功','success')
                    setTimeout(e=>{
                      uni.navigateBack()
                    },1000)
                  }else{
                    this.$toast(res.message)
                  }
                })
              } catch (error) {
                console.error('图片上传过程中出现错误', error);
                this.$toast('图片上传失败')
              }
            }
          }
        })
      },
    }
  }
</script>

<style lang="less" scoped>
.write-evaluation{
  padding: 40rpx 24rpx;
  .evaluation-header{
    border-bottom: 2rpx solid #efefef;
    padding-bottom: 40rpx;
    margin-bottom: 40rpx;
    .h2{
      font-size: 36rpx;
      color: var(--title-color);
      font-weight: bold;
    }
    .box-flex{
      align-items: center;
      color: #6D6D6D;
      font-size: 26rpx;
      margin-top: 30rpx;
      .span{
        font-size: 26rpx;
        color: var(--sub-theme);
      }
    }
    .header-one{
      font-size: 30rpx;
    }
  }
  .evaluation-main{
    border-radius: 20rpx;
    padding: 24rpx;
    background: var(--page-bg);
    margin-bottom: 40rpx;
    .textarea{
      width: 100%;
      font-size: 26rpx;
      color: #6D6D6D;
    }
    .main-imgs{
      display: flex;
      flex-wrap: wrap;
      .imgs-item,.imgs-upload{
        width: 206rpx;
        height: 206rpx;
        margin-right: 14rpx;
        margin-bottom: 14rpx;
        border-radius: 20rpx;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 22rpx;
        color: var(--title-color);
        overflow: hidden;
      }
      .imgs-item{
        position: relative;
        &:nth-child(3n){
          margin-right: 0;
        }
        .img{
          width: 100%;
          height: 100%;
        }
        .icon{
          width: 46rpx;
          height: 46rpx;
          position: absolute;
          right: 4rpx;
          top: 4rpx;
        }
      }
    }
  }
  .main-card{
    padding: 28rpx 24rpx;
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
  }
  .main-title{
    font-size: 28rpx;
    margin-bottom: 6rpx;
    color: var(--title-color);
    display: flex;
    align-items: center;
    line-height: 80rpx;
    font-weight: bold;
    .date-icon{
      width: 32rpx;
      height: 32rpx;
      margin-left: auto;
    }
  }
  .main-doctor{
    display: flex;
    align-items: center;
    .doctor-item{
      margin-right: 20rpx;
      width: 114rpx;
      border-radius: 8rpx;
      overflow: hidden;
      border: 2rpx solid transparent;
      position: relative;
      &.active{
        border-color: var(--theme-color);
      }
      .img{
        width: 114rpx;
        height: 114rpx;
        display: block
      }
      .icon{
        position: absolute;
        right: 0;
        top: 0;
        width: 30rpx;
        height: 30rpx;
      }
      .h2{
        font-size: 22rpx;
        color: var(--title-color);
        line-height: 38rpx;
        text-align: center;
      }
    }
  }
  .evaluation-project{
    .project-p{
      font-size: 26rpx;
      color: #6D6D6D;
      line-height: 68rpx;
    }
  }
  .evaluation-footer{
    margin-top: 40rpx;
    .footer-p{
      font-size: 22rpx;
      color: #6D6D6D;
      margin-top: 16rpx;
      text-align: center;
    }
  }
}
</style>
